<!DOCTYPE html>
<!-- saved from url=(0091)file:///Users/cc/Desktop/20210528-%E5%A4%AA%E5%8E%9F%E5%B7%A5%E4%B8%9A/git/day09/state.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React</title>
  <!-- 引入react依赖 -->
  <script src="./React_files/react.development.js"></script>
  <script src="./React_files/react-dom.development.js"></script>
  <!-- jsx语法解析 -->
  <script src="./React_files/babel.min.js"></script>
<script>'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// function Clock(props) {
//   return (
//     <div>
//     <h1>Hello，World</h1>
//     <h2>当前时间是{props.date.toLocaleTimeString()}</h2>
//   </div>
//   )
// }
var Clock = function (_React$Component) {
  _inherits(Clock, _React$Component);

  function Clock(props) {
    _classCallCheck(this, Clock);

    var _this = _possibleConstructorReturn(this, (Clock.__proto__ || Object.getPrototypeOf(Clock)).call(this, props));

    _this.state = { date: new Date() };
    return _this;
  }

  _createClass(Clock, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      // 在组件被渲染到dom时执行
      this.timer = setInterval(function () {
        return _this2.myTime();
      }, 1000);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      clearInterval(this.timer);
    }
  }, {
    key: 'myTime',
    value: function myTime() {
      this.setState({
        date: new Date()
      });
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
        React.createElement(
          'h1',
          null,
          'Hello\uFF0CWorld'
        ),
        React.createElement(
          'h2',
          null,
          '\u5F53\u524D\u65F6\u95F4\u662F',
          this.state.date.toLocaleTimeString()
        )
      );
    }
  }]);

  return Clock;
}(React.Component);

function App() {
  return React.createElement(
    'div',
    null,
    React.createElement(Clock, null),
    ',',
    React.createElement(Clock, null),
    ',',
    React.createElement(Clock, null),
    ','
  );
}
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZSBCYWJlbCBzY3JpcHQiXSwibmFtZXMiOlsiQ2xvY2siLCJwcm9wcyIsInN0YXRlIiwiZGF0ZSIsIkRhdGUiLCJ0aW1lciIsInNldEludGVydmFsIiwibXlUaW1lIiwiY2xlYXJJbnRlcnZhbCIsInNldFN0YXRlIiwidG9Mb2NhbGVUaW1lU3RyaW5nIiwiUmVhY3QiLCJDb21wb25lbnQiLCJBcHAiLCJSZWFjdERPTSIsInJlbmRlciIsImRvY3VtZW50IiwiZ2V0RWxlbWVudEJ5SWQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7QUFDRTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0lBQ01BLEs7OztBQUNKLGlCQUFZQyxLQUFaLEVBQWtCO0FBQUE7O0FBQUEsOEdBQ1ZBLEtBRFU7O0FBRWhCLFVBQUtDLEtBQUwsR0FBYSxFQUFDQyxNQUFLLElBQUlDLElBQUosRUFBTixFQUFiO0FBRmdCO0FBR2pCOzs7O3dDQUNrQjtBQUFBOztBQUNqQjtBQUNBLFdBQUtDLEtBQUwsR0FBYUMsWUFDWDtBQUFBLGVBQUksT0FBS0MsTUFBTCxFQUFKO0FBQUEsT0FEVyxFQUVYLElBRlcsQ0FBYjtBQUlEOzs7MkNBQ3FCO0FBQ3BCQyxvQkFBYyxLQUFLSCxLQUFuQjtBQUNEOzs7NkJBQ087QUFDTixXQUFLSSxRQUFMLENBQWM7QUFDWk4sY0FBTSxJQUFJQyxJQUFKO0FBRE0sT0FBZDtBQUdEOzs7NkJBQ087QUFDTixhQUNBO0FBQUE7QUFBQTtBQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUEsU0FERjtBQUVFO0FBQUE7QUFBQTtBQUFBO0FBQVUsZUFBS0YsS0FBTCxDQUFXQyxJQUFYLENBQWdCTyxrQkFBaEI7QUFBVjtBQUZGLE9BREE7QUFNRDs7OztFQTNCaUJDLE1BQU1DLFM7O0FBNkIxQixTQUFTQyxHQUFULEdBQWM7QUFDWixTQUNFO0FBQUE7QUFBQTtBQUNFLHdCQUFDLEtBQUQsT0FERjtBQUFBO0FBRUUsd0JBQUMsS0FBRCxPQUZGO0FBQUE7QUFHRSx3QkFBQyxLQUFELE9BSEY7QUFBQTtBQUFBLEdBREY7QUFPRDtBQUNEQyxTQUFTQyxNQUFULENBQ0Usb0JBQUMsR0FBRCxPQURGLEVBRUVDLFNBQVNDLGNBQVQsQ0FBd0IsTUFBeEIsQ0FGRiIsImZpbGUiOiJJbmxpbmUgQmFiZWwgc2NyaXB0Iiwic291cmNlc0NvbnRlbnQiOlsiXG4gIC8vIGZ1bmN0aW9uIENsb2NrKHByb3BzKSB7XG4gIC8vICAgcmV0dXJuIChcbiAgLy8gICAgIDxkaXY+XG4gIC8vICAgICA8aDE+SGVsbG/vvIxXb3JsZDwvaDE+XG4gIC8vICAgICA8aDI+5b2T5YmN5pe26Ze05pive3Byb3BzLmRhdGUudG9Mb2NhbGVUaW1lU3RyaW5nKCl9PC9oMj5cbiAgLy8gICA8L2Rpdj5cbiAgLy8gICApXG4gIC8vIH1cbiAgY2xhc3MgQ2xvY2sgZXh0ZW5kcyBSZWFjdC5Db21wb25lbnR7XG4gICAgY29uc3RydWN0b3IocHJvcHMpe1xuICAgICAgc3VwZXIocHJvcHMpO1xuICAgICAgdGhpcy5zdGF0ZSA9IHtkYXRlOm5ldyBEYXRlKCl9O1xuICAgIH1cbiAgICBjb21wb25lbnREaWRNb3VudCgpe1xuICAgICAgLy8g5Zyo57uE5Lu26KKr5riy5p+T5YiwZG9t5pe25omn6KGMXG4gICAgICB0aGlzLnRpbWVyID0gc2V0SW50ZXJ2YWwoXG4gICAgICAgICgpPT50aGlzLm15VGltZSgpLFxuICAgICAgICAxMDAwXG4gICAgICApXG4gICAgfVxuICAgIGNvbXBvbmVudFdpbGxVbm1vdW50KCl7XG4gICAgICBjbGVhckludGVydmFsKHRoaXMudGltZXIpO1xuICAgIH1cbiAgICBteVRpbWUoKXtcbiAgICAgIHRoaXMuc2V0U3RhdGUoe1xuICAgICAgICBkYXRlOiBuZXcgRGF0ZSgpXG4gICAgICB9KVxuICAgIH1cbiAgICByZW5kZXIoKXtcbiAgICAgIHJldHVybiAoXG4gICAgICA8ZGl2PlxuICAgICAgICA8aDE+SGVsbG/vvIxXb3JsZDwvaDE+XG4gICAgICAgIDxoMj7lvZPliY3ml7bpl7TmmK97dGhpcy5zdGF0ZS5kYXRlLnRvTG9jYWxlVGltZVN0cmluZygpfTwvaDI+XG4gICAgICA8L2Rpdj5cbiAgICAgIClcbiAgICB9XG4gIH1cbiAgZnVuY3Rpb24gQXBwKCl7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXY+XG4gICAgICAgIDxDbG9jayAvPixcbiAgICAgICAgPENsb2NrIC8+LFxuICAgICAgICA8Q2xvY2sgLz4sXG4gICAgICA8L2Rpdj5cbiAgICApXG4gIH1cbiAgUmVhY3RET00ucmVuZGVyKFxuICAgIDxBcHAgLz4sXG4gICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3Jvb3QnKVxuICApO1xuICBcblxuIl19</script></head>

<body>
  <div id="root"><div><div><h1>Hello，World</h1><h2>当前时间是上午11:15:52</h2></div>,<div><h1>Hello，World</h1><h2>当前时间是上午11:15:52</h2></div>,<div><h1>Hello，World</h1><h2>当前时间是上午11:15:52</h2></div>,</div></div>

<script type="text/babel">
  // function Clock(props) {
  //   return (
  //     <div>
  //     <h1>Hello，World</h1>
  //     <h2>当前时间是{props.date.toLocaleTimeString()}</h2>
  //   </div>
  //   )
  // }
  class Clock extends React.Component{
    constructor(props){
      super(props);
      this.state = {date:new Date()};
    }
    componentDidMount(){
      // 在组件被渲染到dom时执行
      this.timer = setInterval(
        ()=>this.myTime(),
        1000
      )
    }
    componentWillUnmount(){
      clearInterval(this.timer);
    }
    myTime(){
      this.setState({
        date: new Date()
      })
    }
    render(){
      return (
      <div>
        <h1>Hello，World</h1>
        <h2>当前时间是{this.state.date.toLocaleTimeString()}</h2>
      </div>
      )
    }
  }
  function App(){
    return (
      <div>
        <Clock />,
        <Clock />,
        <Clock />,
      </div>
    )
  }
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
  

</script>

</body></html>